<template>
<div class="box">
    <div class="head">
      <van-icon name="friends" size="25px" color='#26a2ff' @click="init()"/>
      <div @click="list()">
        郑州市
      <van-icon name="arrow-down"/>  
      </div>
      <van-icon name="chat" size="25px" color='#26a2ff' @click="tap()" />
    </div>

<div id='dox'></div>

<div class="foot">

<van-grid :gutter="10" style="padding:0;">
  <van-grid-item style="width: 50px;height:50px;flex-basis:50px;padding-right:0"
    v-for="value in 1 "
    :key="value"
    icon="shop-o"
    text="帮我买"
     to="/bwmfb"
  />
</van-grid>
 
<van-grid :gutter="10"  style="padding:0;">
  <van-grid-item style="width: 50px;height:50px;flex-basis:50px;  padding-right:0"
    v-for="value in 1 "
    :key="value"
    icon="peer-pay"
    text="帮我取"
     to="/bwmfb"
  />
</van-grid>

<van-grid :gutter="10" style="padding:0;">
  <van-grid-item style="width: 50px;height:50px;flex-basis:50px;  padding-right:0"
    v-for="value in 1 "
    :key="value"
    icon="gift-o"
    text="帮我送"
    to="/bwsfb"
  />
</van-grid>

<van-grid :gutter="10" style="padding:0;" >
  <van-grid-item style="width: 50px;height:50px;flex-basis:50px;  padding-right:0" 
    v-for="value in 1 "
    :key="value"
    icon="underway-o"
    text="帮排队"
    to="/bpdfb"
  />
</van-grid>

<van-grid :gutter="10" style="padding:0;">
  <van-grid-item style="width: 50px;height:50px;flex-basis:50px;  padding-right:0"
    v-for="value in 1 "
    :key="value"
    icon="like-o"
    text="帮帮帮"
    to="/bbmfb"
  />
</van-grid>

 </div> 
<!-- <van-tabbar v-model="active" style="z-index=2">
  <van-tabbar-item icon="shop-o" to="/bwmfb">帮我买</van-tabbar-item>
  <van-tabbar-item icon="peer-pay" to="/bwqfb">帮我取</van-tabbar-item>
  <van-tabbar-item icon="gift-o" to="/bwsfb">帮我送</van-tabbar-item>
  <van-tabbar-item icon="underway-o" to="/bpdfb">帮排队</van-tabbar-item>
  <van-tabbar-item icon="like-o" to="/bbmfb">帮帮帮</van-tabbar-item>
</van-tabbar> -->
    </div> 

</template>
<script>

export default {
     name:'Zyfb',
     data() {
       return {
      active: 0,
     
       
    }
  },
  methods:{
     tap(){
      this.$router.push('/xxlb')
    },
    init(){
      this.$router.push('/zyzlfb')
    },
    list(){
      this.$router.push('/xzcsfb')
    }
  

  },
  mounted(){
    var map = new AMap.Map('dox', {
        zoom:11,//级别
        center: [121.59996, 31.197646], //中心点坐标
        viewMode:'3D'//使用3D视图
    });
  }

}
</script>
<style>
 
  *{margin: 0; padding: 0}
   html,body,.box,#app{
    height: 100%;
  } 
  .box{
    display: flex;
    flex-direction: column;
  
  }
  .head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;
    width: 430px;
    margin:0 auto
  }

#dox {
      flex: 1;
      }

.foot{
  display: flex;
  justify-content: space-around;
 align-items: center;
  height: 90px;
  background:rgba(255,255,255,0.8);
}
</style>

